<template>
  <div v-loading="pageLoading" class="workbench">
    <div class="search">
      <div>
        <el-select v-model="form.timeType" class="mr20" placeholder="请选择" @change="selectChange">
          <el-option label="自然日" value="0"></el-option>
          <el-option label="自然周" value="1"></el-option>
          <el-option label="自然月" value="2"></el-option>
          <el-option label="自然年" value="3"></el-option>
        </el-select>
        <!-- 按天 -->
        <el-date-picker v-if="form.timeType === '0'" key="tian" v-model="form.selectDate"
                        :picker-options="pickerOptions"
                        end-placeholder="结束日期" format="yyyy-MM-dd" range-separator="至"
                        start-placeholder="开始日期" type="daterange" value-format="yyyy-MM-dd"
        ></el-date-picker>
        <!-- 自然周 -->
        <el-date-picker v-if="form.timeType === '1'" key="zhou" v-model="form.selectDate"
                        :picker-options="pickerOptions"
                        format="yyyy 第 WW 周" placeholder="选择周" type="week" value-format="yyyy-MM-dd"
        ></el-date-picker>
        <!-- 自然月 -->
        <el-date-picker v-if="form.timeType === '2'" key="yue" v-model="form.selectDate" :picker-options="pickerOptions"
                        placeholder="选择月" type="month" value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <!-- 自然年 -->
        <el-date-picker v-if="form.timeType === '3'" key="nian" v-model="form.selectDate"
                        :picker-options="pickerOptions"
                        placeholder="选择年" type="year" value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <div>
        <el-button icon="el-icon-search" type="primary" @click="query()">查询</el-button>
        <el-button icon="el-icon-refresh" plain type="info" @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="top">
      <div class="left">
        <div>
          <span>总客户数</span>
          <span class="total">{{ pageData.totalCustomer || 0 }}</span>
        </div>
        <div>
          <span>今日新增</span>
          <span class="addNum">{{ pageData.todayAdd || 0 }}</span>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <span>存量客户</span>
          <span class="shuliang">{{ pageData.stockCustomer || 0 }}</span>
          <p>
            <img :src="require(`../../../assets/cutomer/${stockCustomerFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="stockCustomerFlag ? 'percentageDown' : 'percentageAdd'">
              {{ pageData.stockCustomerChange || 0 }}%
            </span>
            <span>{{ dateText }}{{ stockCustomerFlag ? '新减' : '新增' }}</span>
          </p>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item">
          <span>新客总数</span>
          <span class="shuliang">{{ pageData.totalNewCustomer || 0 }}</span>
          <p>
            <img :src="require(`../../../assets/cutomer/${totalNewCustomerFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="totalNewCustomerFlag ? 'percentageDown' : 'percentageAdd'">
              {{ pageData.totalNewCustomerChange || 0 }}%
            </span>
            <span>{{ dateText }}{{ totalNewCustomerFlag ? '新减' : '新增' }}</span>
          </p>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item">
          <span>意向客户</span>
          <span class="shuliang">{{ pageData.intendCustomer || 0 }}</span>
          <p>
            <img :src="require(`../../../assets/cutomer/${intendCustomerFlag ? 'down' : 'jump'}.png`)"
                 alt=""
            >
            <span :class="intendCustomerFlag ? 'percentageDown' : 'percentageAdd'">
              {{ pageData.intendCustomerChange || 0 }}%
            </span>
            <span>{{ dateText }}{{ intendCustomerFlag ? '新减' : '新增' }}</span>
          </p>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item">
          <span>报价客户</span>
          <span class="shuliang">{{ pageData.quoteCustomer || 0 }}</span>
          <p>
            <img :src="require(`../../../assets/cutomer/${quoteCustomerFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="quoteCustomerFlag ? 'percentageDown' : 'percentageAdd'">
              {{ pageData.quoteCustomerChange }}%
            </span>
            <span>{{ dateText }}{{ quoteCustomerFlag ? '新减' : '新增' }}</span>
          </p>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item">
          <span>成交客户</span>
          <span class="shuliang">{{ pageData.transactedCustomer || 0 }}</span>
          <p>
            <img :src="require(`../../../assets/cutomer/${transactedCustomerFlag ? 'down' : 'jump'}.png`)" alt="">
            <span :class="transactedCustomerFlag ? 'percentageDown' : 'percentageAdd'">
              {{ pageData.transactedCustomerChange || 0 }}%
            </span>
            <span>{{ dateText }}{{ transactedCustomerFlag ? '新减' : '新增' }}</span>
          </p>
        </div>
      </div>
    </div>
    <LeaderChart v-if="form.type === '1'" :form="sonForm"></LeaderChart>
    <ChannelChart v-if="form.type === '2'" :form="sonForm"></ChannelChart>
  </div>
</template>
<script>
import { parseTime } from '@/utils/common'
import LeaderChart from './components/LeaderChart'
import ChannelChart from './components/ChannelChart'

export default {
  name: 'workbench',
  components: {
    LeaderChart,
    ChannelChart
  },
  computed: {
    stockCustomerFlag() {
      return this.pageData.stockCustomerChange < 0
    },
    totalNewCustomerFlag() {
      return this.pageData.totalNewCustomerChange < 0
    },
    intendCustomerFlag() {
      return this.pageData.intendCustomerChange < 0
    },
    quoteCustomerFlag() {
      return this.pageData.quoteCustomerChange < 0
    },
    transactedCustomerFlag() {
      return this.pageData.transactedCustomerChange < 0
    }
  },
  data() {
    return {
      form: {
        type: '',         // 1：领导 2：各渠道
        timeType: '0',
        selectDate: '',
        startTime: '',
        endTime: '',
        insuranceType: ''
      },
      pageData: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()

        }
      },
      pageLoading: false,
      timeTypeToText: {
        '0': '本日',
        '1': '本周',
        '2': '本月',
        '3': '本年'
      },
      dateText: '',
      sonForm: {}
    }
  },
  methods: {
    selectChange() {
      this.form.selectDate = ''
      this.form.startTime = ''
      this.form.endTime = ''
    },
    query() {
      this.reassembly(this.form.selectDate)
      this.getPageData()
    },
    // 组装startTime和endTime入参
    reassembly(selectDate) {
      if (!selectDate) return
      if (this.form.timeType === '0') {
        // 日
        this.form.startTime = selectDate[0]
        this.form.endTime = selectDate[1]
      } else if (this.form.timeType === '1') {
        // 周
        this.form.startTime = parseTime(new Date(new Date(selectDate).getTime() - 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
        this.form.endTime = parseTime(new Date(new Date(selectDate).getTime() + 5 * 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
      } else if (this.form.timeType === '2') {
        // 月
        this.form.startTime = selectDate
        const temp = selectDate.split('-')
        temp[1] = +temp[1] + 1
        if (temp[1] === 13) {
          temp[1] = '01'
          temp[0] = +temp[0] + 1
        }
        this.form.endTime = temp.join('-')
      } else if (this.form.timeType === '3') {
        // 年
        this.form.startTime = selectDate
        const temp = selectDate.split('-')
        temp[0] = +temp[0] + 1
        this.form.endTime = temp.join('-')
      }
    },
    reset() {
      this.form = {
        ...this.form,
        timeType: '2',
        selectDate: '',
        // startTime: parseTime(new Date().setMonth(new Date().getMonth() - 3), "{y}-{m}-{d}"),
        // endTime: parseTime(new Date(), "{y}-{m}-{d}")
        startTime: '',
        endTime: ''
      }
      this.getPageData()
    },
    async init() {
      const allInsuranceType = this.$store.state.user.allInsuranceType
      if (this.$store.state.user.allInsuranceType?.length >= 2) {
        this.form.type = '1'
        this.form.insuranceType = ''
      } else {
        this.form.type = '2'
        this.form.insuranceType = allInsuranceType?.[0]
      }
      this.form.startTime = parseTime(new Date(), '{y}-{m}-{d}')
      this.form.endTime = parseTime(new Date(), '{y}-{m}-{d}')
      try {
        this.pageLoading = true
        await this.getPageData()
        this.pageLoading = false
      } catch (error) {
        this.pageLoading = false
      }
    },
    getPageData() {
      //   this.pageLoading = true
      //   this.sonForm = JSON.stringify(this.form)
      //   const params = {
      //     ...this.form
      //   }
      //   return new Promise((resolve) => {
      //     getStaticsticalData(params)
      //       .then(res => {
      //         if (res.code === 200) {
      //           const temp = res.data
      //           Object.keys(temp).forEach(key => {
      //             if (key.indexOf('Change') > 0 && temp[key] >= 0) {
      //               temp[key] = '+' + temp[key]
      //             }
      //           })
      //           this.pageData = temp
      //           this.dateText = this.timeTypeToText[this.form.timeType]
      //         }
      //       })
      //       .finally(() => {
      //         this.pageLoading = false
      //       })
      //   })
      // }
      let temp = {
        'totalCustomer': 159,
        'todayAdd': 153,
        'stockCustomer': 5,
        'totalNewCustomer': 153,
        'intendCustomer': 12,
        'quoteCustomer': 9,
        'transactedCustomer': 8,
        'stockCustomerChange': '58',
        'totalNewCustomerChange': '100',
        'intendCustomerChange': '100',
        'quoteCustomerChange': '100',
        'transactedCustomerChange': '100'
      }
      Object.keys(temp).forEach(key => {
        if (key.indexOf('Change') > 0 && temp[key] >= 0) {
          temp[key] = '+' + temp[key]
        }
      })
      this.pageData = temp
      this.dateText = this.timeTypeToText[this.form.timeType]
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/element-ui.scss";

.workbench {
  .top {
    display: flex;

    .left {
      width: 20%;
      background: #fff;
      margin-right: 16px;
      display: flex;
      align-items: center;
      font-size: 13px;
      padding: 0 10px;

      div {
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;

        .total {
          font-size: 30px;
          color: #393B44;
        }

        .addNum {
          font-size: 30px;
          color: #14D595;
        }
      }
    }

    .right {
      width: 80%;
      background: #fff;
      display: flex;
      align-items: center;

      .item {
        padding: 21px 36px 18px;
        flex: 1;
        display: flex;
        flex-direction: column;
        line-height: 18px;
        font-size: 13px;

        .shuliang {
          font-size: 26px;
          font-weight: bold;
          color: #393B44;
          line-height: 31px;
        }

        p {
          font-size: 12px;
          color: #CCCCCC;

          .percentageAdd {
            color: #58CA86;
            margin-right: 5px;
          }

          .percentageDown {
            color: #FF5252;
            margin-right: 5px;
          }
        }
      }
    }

    .el-divider--vertical {
      height: 50%;
    }
  }

  .search {
    display: flex;
    justify-content: space-between;
    padding: 17px 20px;
    background: #fff;
    margin-bottom: 17px;
  }

  .el-button--info:hover {
    border-color: #c5b5b5;
  }
}
</style>

